/* eslint-disable eqeqeq */
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="text">关键字</span
          ><el-input class="inp" placeholder="根据编号搜索" v-model="searchId">
          </el-input>
          <el-button
            type="primary"
            size="small"
            style="float: right  margin-right: 8px"
            @click="getFilterData"
            >搜索</el-button
          >
          <el-button
            size="small"
            style="float: right  margin-right: 8px"
            @click="getFormData"
            >清除</el-button
          >
        </div>
        <el-alert class="alert" type="info" show-icon :closable="false">
          一共有{{ total }}道组题
        </el-alert>
        <el-table :data="filterData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="100">
            <template v-slot="{ row }">
              {{ qustionType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template v-slot="{ row }">
              <div
                v-for="(item, index) in row.questionIDs"
                :key="index"
                href="#"
                style="color: rgb(0, 153, 255)  cursor: pointer"
                @click="showPreview(item)"
              >
                {{ item.number }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="200">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="140">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率" width="140">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="180">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template v-slot="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="btnDelete(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="page"
          background
          :current-page="pages.page"
          :page-size="pages.pagesize"
          :page-sizes="[20, 30, 50, 100]"
          :total="total"
          layout="sizes, prev, pager, next, jumper"
          @current-change="changePage"
          @size-change="changeSize"
        >
        </el-pagination>
      </el-card>
    </div>
    <MyPreview :show-dialog.sync="showDialog" :previewData="previewData" />
  </div>
</template>
<script>
import MyPreview from '../components/my-preview.vue'
import * as api from '../../api/hmmm/questions'
export default {
  data() {
    return {
      pages: {
        page: 1,
        pagesize: 20
      },
      total: 0,
      fromData: [],
      filterData: [],
      searchId: '',
      showDialog: false,
      previewData: {}
    }
  },
  components: { MyPreview },
  computed: {},
  methods: {
    async getFormData() {
      this.searchId = ''
      this.fromData = (await api.randoms({ ...this.pages })).data.items
      this.total = (await api.randoms({ ...this.pages })).data.counts
      this.filterData = this.fromData.filter((item) =>
        item.id.includes(this.searchId)
      )
    },
    async getFilterData() {
      this.fromData = (
        await api.randoms({ page: 1, pagesize: 1000 })
      ).data.items
      this.filterData = this.fromData.filter((item) =>
        item.id.includes(this.searchId)
      )
      this.total = this.filterData.length
    },
    qustionType(type) {
      if (type == 1) {
        return '单选'
      } else if (type == 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    async btnDelete(data) {
      this.$confirm('此操作将永久删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await api.removeRandoms(data)
          await this.getFormData({ ...this.pages })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    changePage(newPage) {
      // newPage是当前点击的页码
      this.pages.page = newPage // 将当前页码赋值给当前的最新页码
      this.getFormData({ ...this.pages })
    },
    changeSize(newSize) {
      this.pages.pagesize = newSize
      this.getFormData({ ...this.pages })
    },
    async showPreview(data) {
      this.showDialog = true
      this.previewData = (await api.detail(data)).data
    }
  },
  async mounted() {
    await this.getFormData()
    // console.log(this.fromData)
  }
}
</script>

<style scoped lang='less'>
.alert {
  margin-bottom: 10px;
}
.inp {
  width: 250px;
}
.text {
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 10px;
}
.page {
  margin-top: 10px;
  float: right;
}
</style>
